<template>
  <default-layout>
    <header-back text="继续教育报名" slot="header"></header-back>
    <div slot="main">
      <div class="form-list">
        <div class="form-list-item">
          <span class="label">姓名：</span>
          <span class="content">{{userInfo.aac003}}</span>
        </div>
        <!--<div class="form-list-item">
          <span class="label">档案号：</span>
          <span class="content">{{detail.archiveCode}}</span>
        </div>-->
        <div class="form-list-item">
          <span class="label">身份证号：</span>
          <span class="content">{{userInfo.aac002}}</span>
        </div>
      </div>
      <div class="form">
        <yd-cell-group>
          <yd-cell-item>
            <span slot="left" class="label required">申报职称：</span>
            <xf-picker
              :valid="[{required: true, msg: '请选择申报职称'}]"
              v-model="form.titleLevelCode"
              ref="titleLevelCode"
              :text.sync="form.titleLevel"
              :list="eduLevel"
              slot="right"
              placeholder="请选择申报职称"></xf-picker>
          </yd-cell-item>
          <yd-cell-item>
            <span slot="left" class="label required">报名课：</span>
            <xf-picker
              :valid="[{required: true, msg: '请选择报名课'}]"
              :list="courses"
              v-model="form.course"
              ref="course"
              slot="right"
              placeholder="请选择报名课"></xf-picker>
          </yd-cell-item>
          <!--<yd-cell-item>
            <span slot="left" class="label required">报名年度：</span>
            <xf-picker
              :valid="[{required: true, msg: '请选择报名年度'}]"
              :list="vintages"
              v-model="form.vintages"
              ref="vintages"
              slot="right"
              placeholder="请选择报名年度"></xf-picker>
          </yd-cell-item>-->
          <yd-cell-item>
            <span slot="left" class="label required">报名年份：</span>
            <xf-picker
              :valid="[{required: true, msg: '请选择报名年份'}]"
              :list="years"
              v-model="form.learnYears"
              ref="learnYears"
              slot="right"
              placeholder="请选择报名年份"></xf-picker>
          </yd-cell-item>
        </yd-cell-group>
      </div>
      <div class="next">
        <mt-button size="large" type="primary" @click="onSubmit">报名</mt-button>
      </div>
    </div>
  </default-layout>
</template>
<script>
  import HeaderBack from '../../../components/header-back/header-back.vue'
  import XfInput from '../../../components/xf-input/xf-input.vue'
  import XfPicker from '../../../components/xf-picker/xf-picker.vue'
  import DefaultLayout from '../../../layouts/default-layout/default-layout'
  import {mapGetters, mapMutations} from 'vuex'
  import {getDics, dics} from '../../../common/js/dictionaries'
  import {validate, personalRecord} from '../../../common/js/util'

  export default {
    components: {
      DefaultLayout,
      XfPicker,
      XfInput,
      HeaderBack},
    data() {
      return {
        form: {
          titleLevel: '', // 职称级别
          titleLevelCode: '',
          titleLevelName: '',
          vintages: '', // 报名年度
          course: '', // 报名课程
          learnYears: '' // 报名年份
        },
        detail: {},
        eduLevel: [],
        courses: [],
        vintages: [],
        years: []
      }
    },
    computed: {
      ...mapGetters([
        'userInfo'
      ])
      /*
      years: {
        get() {
          const year = new Date().getFullYear()
          const arr = []
          for (let i = 0; i < 5; i++) {
            arr.push({
              name: year + i,
              value: year + i
            })
          }
          return arr
        }
      }
      */
    },
    methods: {
      ...mapMutations({
        setOrder: 'SET_ORDER'
      }),
      onSubmit() {
        validate.call(this, this.form).then(() => {
          const form = Object.assign({}, this.form)
          // form.titleLevel = form.titleLevelCode
          form.personName = this.userInfo.name
          form.archiveCode = this.userInfo.archiveCode
          form.personCard = this.userInfo.idCard
          this.$post('/admin/person/sapi/education/continuing/get/signup/info', form, loading => { this.$message.loading(loading) }).then(res => {
            this.setOrder(res.data)
            this.$router.replace({
              name: 'payWay',
              query: {
                type: 'education'
              }
            })
          })
        })
      },
      getSignUpInfo() {
        this.$post('/admin/person/sapi/education/continuing/get/signup/baseInfo', {
          cardId: this.userInfo.idCard,
          titleLevel: this.form.titleLevel,
          titleLevelCode: this.form.titleLevelCode
        }, loading => { this.$message.loading(loading) }).then(res => {
          this.form.vintage = ''
          this.form.course = ''
          this.courses = res.data.course.map(item => {
            return {name: item, value: item}
          })
          this.years = res.data.learnYears.map(item => {
            return {name: item, value: item}
          })
        })
      },
      // 档案信息查询
      getInfo() {
        personalRecord().then(res => {
          this.detail = res.archivesSearchForm
        })
      },
      getDics() {
        getDics(dics.eduLevel).then(res => {
          this.eduLevel = res[0]
        })
      }
    },
    created() {
      // this.getInfo()
      this.getDics()
      this.$watch('form.titleLevel', () => {
        setTimeout(() => {
          this.getSignUpInfo()
        }, 20)
      })
    }
  }
</script>
<style scoped lang="scss">
  @import "../../../common/style/variable";
  .form{
    margin: .15rem 0 0 0;
  }
  .next{
    padding: .15rem 0 0 0;
  }
</style>
